<template>
  <div class="app-container">
      <el-header style="padding: 20px">
        <el-row type="flex">
          <el-col :span="12" type="flex" justify="center">
            <el-date-picker
              v-model="currentTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-button icon="el-icon-search" circle type="primary" @click="searchHistory"
                       style="margin-left: 13px"></el-button>
            <el-button type="primary" @click="cancelSearch">重置</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main style="height: 100%">
        <div v-if="dataList.length>0">
          <!-- 走马灯 -->
          <el-carousel autoplay @change="handleCarouselChange" style="text-align: center" type="card" arrow="always"
                       height="100px">
            <el-carousel-item v-for="(image, index) in dataList" :key="index">
              <el-image :src="filePrefix+image.currentName+'.png'" alt="轮播图"
                        style="width: 100%"></el-image>
            </el-carousel-item>
          </el-carousel>
          <!-- 大图 -->
          <el-row>
            <el-col :span="16" :offset="4">
              <div
                style="height: 500px; display: flex; justify-content: center; align-items: center;padding: 13px;border-radius: 20px;background-color: white;flex-direction: column">
                <el-image
                  :src="activeUrl"
                  alt="大图"
                  :preview-src-list="[activeUrl]"
                  fit="contain"
                  style="height: 100%; width: auto; max-width: 100%;"
                >
                  <div slot="error">
                    <el-image :src="require('@/assets/404_images/404.png')" style="height: 100%; width: auto; max-width: 100%;"></el-image>
                  </div>
                </el-image>
                <div>
                  <span style="font-size: 20px;font-weight: bold">{{ nowDate }}</span>
                </div>
              </div>

            </el-col>
          </el-row>
        </div>
        <el-empty v-else></el-empty>


      </el-main>
      <el-footer style="text-align: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageNum"
          :page-sizes="[5,10,20,50]"
          :page-size="query.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-footer>
  </div>

</template>

<script>
import {getHistory} from "@/api/system/history";
import moment from "moment";

export default {
  name: "ET",
  data() {
    return {
      total: null,
      query: {
        startTime: null,
        endTime: null,
        pageSize: 10,
        pageNum: 1
      },
      // activeIndex: 0,
      dataList: [],
      currentTime: null,
      nowDate: null,
      activeUrl: null,
      product: "ET",
      filePrefix: this.$config.productPath + "ET/",//存放的目录前缀
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleSizeChange(val) {
      this.query.pageSize = val
      this.getData()
    },
    handleCarouselChange(val) {
      const data = this.dataList[val]
      this.activeUrl = this.$config.productPath + this.product+"/" + data.currentName + ".png"
      this.nowDate = this.parseDate(data.currentName)
    },
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.getData()
    },
    getData() {
      getHistory(this.query).then(res => {
        this.total = res.data.total
        // this.query.pageNum = res.data.pages
        this.dataList = res.data.records
        if (res.data.records.length > 0) {
          this.activeUrl = this.filePrefix + res.data.records[0].currentName + ".png"
          this.nowDate = this.parseDate(res.data.records[0].currentName)
        }

      })
    },
    searchHistory() {
      if (this.currentTime === null) {
        this.$message.error("请选择时间范围")
      } else {
        const startTime = moment(this.currentTime[0]).format('YYYYMMDDHHmm')
        const endTime = moment(this.currentTime[1]).format('YYYYMMDDHHmm')
        this.query.startTime = startTime
        this.query.endTime = endTime
        this.getData()
      }
    },
    cancelSearch() {
      this.currentTime = null
      this.reSetForm()
      this.getData()
    },
    reSetForm() {
      this.query.pageSize = 10
      this.query.pageNum = 1
      this.query.startTime = null
      this.query.endTime = null
    },
    parseDate(timestamp) {
      const dateTime = moment(timestamp, 'YYYYMMDDHHmm');
// 格式化为可读的时间字符串
      const formattedDateTime = dateTime.format('YYYY-MM-DD HH:mm');
      return formattedDateTime
    }
  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

/deep/ .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

/deep/ .el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
